<template>
  <div class="coupon-card">
    <h4 class="cp-header">使用优惠券</h4>
    <div class="cp-form-container">
      <!-- <div
        class="cp-default-form"
        v-show="couponList.length > 0 && isEdit == false"
      >
        <span> {{ currCoupon.couponName }} </span>
        <el-button link type="success" @click="isEdit = true">修改</el-button>
      </div> -->
      <div class="cp-default-form" v-show="couponList.length <= 0">
        <span>暂无可用优惠券</span>
      </div>
      <div>
        <div v-if="couponList.length > 0" style="margin-bottom: 5px">
          <!-- <el-radio
            v-model="currCouponId"
            v-for="item in couponList"
            :key="item.id"
            :label="item.id"
          >
            <span>{{ item.couponName }}</span>
          </el-radio> -->
          <el-radio
            v-model="currCouponId"
            :label="0"
            @click="selectCoupon({ id: 0, enable: true })"
            >不使用优惠券</el-radio
          >
        </div>
        <div class="coupon-list">
          <div
            class="c-card"
            :class="{ enable: currCouponId == item.id }"
            v-for="item in couponList"
            :key="item.id"
            @click="selectCoupon(item)"
          >
            <div :class="{ unenable: item.enable == false }"></div>
            <div class="c-card-content">
              <div class="c-card-c-lf">
                <img :src="baseImgUrl + item.couponImg" alt="" class="img" />
              </div>
              <div class="c-card-c-mid">
                <div class="c-title">{{ item.couponName }}</div>
                <div class="c-limit">使用门槛：满{{ item.minPoint }}元</div>
              </div>
              <div class="c-card-c-rt">
                <div class="price">￥{{ item.amount }}</div>
              </div>
            </div>
            <div class="c-card-footer">
              使用日期： {{ item.enableStartTime }} - {{ item.enableEndTime }}
            </div>
          </div>
          <!-- <div class="c-card">
            <div class="c-card-content">
              <div class="c-title">不使用优惠券</div>
            </div>
          </div> -->
        </div>
        <!-- <el-row>
          <el-button color="#1aa684" @click="submitCoupon" size="small"
            >确定</el-button
          >
        </el-row> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch } from 'vue';

const couponList = ref([]);
const props = defineProps({
  couponList: {
    type: Array,
    default: () => [],
  },
  currCouponId: {
    type: Number,
  },
});
const baseImgUrl = import.meta.env.VITE_APP_BASE_API;
const getCouponist = () => {
  couponList.value = props.couponList;
  console.log("优惠券列表", couponList.value);
  currCoupon.value = props.couponList.find((c) => c.checked == true);
  if (currCoupon.value) {
    currCouponId.value = currCoupon.value.id;
  } else {
    currCouponId.value = 0;
  }
  console.log("couponList", currCoupon.value);
};

const isEdit = ref(false);
const currCoupon = ref({});
const currCouponId = ref(0);
const emit = defineEmits(["saveCouponInfo"]);
const selectCoupon = (item) => {
  if (!item.enable) {
    return;
  }
  currCouponId.value = item.id;
  let index = couponList.value.findIndex((c) => c.id == item.id);
  if (index > -1) {
    currCoupon.value = couponList.value[index];
  } else {
    currCoupon.value = {
      couponName: "不使用优惠券",
      id: 0,
    };
  }

  couponList.value.forEach((e) => {
    if (e.id == currCouponId.value) {
      e.checked = true;
    } else {
      e.checked = false;
    }
  });
  emit("saveCouponInfo", couponList.value, currCouponId.value);
};
const submitCoupon = () => {
  // console.log(currCouponId.value);
  // let index = couponList.value.findIndex((c) => c.id == currCouponId.value);
  // if (index > -1) {
  //   currCoupon.value = couponList.value[index];
  // } else {
  //   currCoupon.value = {
  //     couponName: "不使用优惠券",
  //     id: 0,
  //   };
  // }

  // couponList.value.forEach((item) => {
  //   if (item.id == currCouponId.value) {
  //     item.checked = true;
  //   } else {
  //     item.checked = false;
  //   }
  // });
  emit("saveCouponInfo", couponList.value, currCouponId.value);
  isEdit.value = false;
};
console.log(props.currCouponId);
watch(
  () => props.currCouponId,
  (val) => {
    // console.log("val", val);
    // if (props.currCouponId >= 0) {
    //   getCouponist();
    // }
  },
  {
    immediate: true,
  }
);
watch(
  () => props.couponList,
  (val) => {
    if (props.currCouponId >= 0) {
      getCouponist();
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
.enable {
  border: 1px solid #d93600;
}
.unenable {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff56;
  z-index: 22;
  cursor: not-allowed;
}
.coupon-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;

  .c-card {
    width: 280px;
    background-color: #fffbf3;
    margin-right: 5px;
    cursor: pointer;
    position: relative;
    .c-card-content {
      display: flex;
      padding: 10px;
      .c-card-c-lf {
        .img {
          width: 60px;
          height: 60px;
        }
      }
      .c-card-c-mid {
        flex: 1;
        padding-left: 10px;
        .c-title {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          font: 16px "microsoft yahei";
          color: #d93600;
          margin-bottom: 5px;
        }
        .c-limit {
          overflow: hidden;
          color: #666;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
      .c-card-c-rt {
        width: 60px;
        height: 60px;
        padding: 5px 10px;
        .price {
          font-size: 20px;
          color: #d93600;
        }
      }
    }
    .c-card-footer {
      border-top: 1px solid #ccc;
      font-size: 12px;
      padding: 3px 10px;
      color: #666;
    }
  }
}

.el-radio {
  :deep(.el-radio__input.is-checked .el-radio__inner) {
    background: #d93600 !important;
    border-radius: 50%;
    border-color: #d93600;
  }
  :deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #d93600;
  }
}
.coupon-card {
  background: #fdf5d6c0;
  padding: 5px 20px 15px 20px;
  margin-top: 10px;
  .cp-header {
    font-size: 20px;
    font-weight: 300;
    padding: 10px 0;
  }
  .cp-default-form {
    color: #666;
    .el-button {
      margin-left: 10px;
    }
  }
  .cp-form-content {
    display: flex;
    color: #666;

    .cp-form {
      margin-top: 25px;
      flex: 1;
    }
  }
}
</style>
